<template>
  <div>
    <van-nav-bar left-arrow  @click-left="onClickLeft"></van-nav-bar>
    <div style="margin-top: 10vh; margin-left: 5vw; margin-right: 5vw;">
      <h1>登录</h1>
      <div class="van-hairline--bottom top">
        <van-cell-group>
          <van-field v-model="value" placeholder="请输入邮箱" />
        </van-cell-group>
      </div>
      <div class="van-hairline--bottom top" >
        <van-field
          v-model="sms"
          center
          clearable
          placeholder="请输入邮箱验证码"
        >
        <template #button>
          <van-button size="small" type="dark">获取验证码</van-button>
        </template>
        </van-field>
      </div>
      <van-button class="top" type="dark" block style="height: 7vh;">登录</van-button>
      <van-row type="flex" justify="space-between" class="top">
        <van-col span="8">密码登录</van-col>
        <van-col span="8">收不到验证码</van-col>
      </van-row>
      <div style="margin-top: 20vh;">
        <van-grid :border="false" :column-num="2" :gutter="10">
          <van-grid-item>
            <van-button color="#242424" plain block>QQ登录</van-button>
          </van-grid-item>
          <van-grid-item>
            <van-button color="#242424" plain block>微信登录</van-button>
          </van-grid-item>
        </van-grid>
        <div class='text'>登录即同意用户协议，首次登录自动注册</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      m: true,
    };
  },
  methods: {
    onClickLeft() {
      // console.log('返回');
      this.$router.push({ path: '/m/me' });
    },
  },
};
</script>

<style>
.top{
  margin-top: 2.5vh;
}
.text{
  text-align: center;
}
</style>
